<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../../css/index.css">
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="slider-container" id="slider">
    <div class="slider-track" id="slider-track">
      <div class="track-block"></div>
      <div class="track-block"></div>
      <div class="track-block"></div>
      <div class="track-block"></div>
      <div class="track-block"></div>
      <div class="track-block"></div>
      <div class="track-block"></div>
    </div>
    <div class="slider-thumb" id="thumb"></div>
    <div class="slider-labels">
      <span>A</span>
      <span>B</span>
      <span>C</span>
      <span>D</span>
      <span>E</span>
      <span>F</span>
      <span>G</span>
    </div>
  </div>

  <div class="selected-letter" id="selected-letter">A</div>

  <!-- jQuery CDN -->
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
  <script defer src='https://www.google.com/recaptcha/api.js?hl=en-us'></script>
  <script src="../../js/utils/dropdownOptions.js"></script>
  <script src="../../js/utils/enum.js"></script>
  <script src="../../js/utils/regExp.js"></script>
  <script src="../../js/utils/storage.js"></script>
  <script src="../../js/utils/index.js"></script>
  <script src="./index.js"></script>
</body>

</html>